<template>
  <div>
    <div class="list">
      <div  class="item" @click="handleJump(item, 'item')" v-for="(item, index) in d_listData" :key="index"  >
        <div class="name" :class="item.desc&&item.desc.length > 80 ? 'more':''" v-if="item.is_all!=1">
          <span v-if="item.is_top==1" class="top">置顶</span>
          <span :class="item.is_top==1 ? 'text text_indent' : 'text'" >{{item.desc}}</span>
          {{(item.desc).length}}
          <span class="all" v-if="item.desc&&item.desc.length > 80" @click.stop="lookall(index)">全文</span>
        </div>
        <Fulltext :id="item.id" :is_top="item.is_top" v-if="parseInt(item.is_all)===1"></Fulltext>
        <div class="imgs" v-if="item.img_arr.length">
          <div v-for="(itemtwo, indextwo) in item.img_arr" :key="indextwo" class="img">
            <img v-if="indextwo<4" :src="itemtwo"/>
          </div>
          <div v-if="item.img_arr.length>4" class="imgnum">共{{item.img_arr.length}}张图片</div>
        </div>
        <div class="bottom">
          <div class="info">
            <div class="label">{{item.type_name}}</div>
            <span>{{item.view_times}}人浏览</span>
            <span>{{item.refreshtime}}</span>
          </div>
          <a class="call" @click.stop="handleJump(item, 'tel')"><span class="img">拨号</span></a>
        </div>
      </div>
    </div>

    <!-- 登录 -->
    <van-popup
      v-model="showLogin"
      position="right"
      :overlay="false"
      style="width:100%;height:100%"
    >
      <Login
        :utype="2"
        :single_login="true"
        @afterLogin="afterLogin"
        :after_login_data="after_login_data"
        :goback_custom="true"
        @gobackCustomMethod="closeLogin"
      ></Login>
    </van-popup>
  </div>
</template>

<script>
import Fulltext from './fulltext.vue'
import Login from '@/components/Login'
import http from '@/utils/http'
import api from '@/api'
export default{
  components: {
    Fulltext,
    Login
  },
  props: ['listData', 'menu'],
  data () {
    return {
      showLogin: false, // 登录
      after_login_data: {}, // 登录
      is_personal_login: false, // 登录
      JumpItem: null,
      infoPid: null,
      d_listData: this.listData
    }
  },
  watch: {
    listData (value) {
      this.d_listData = value
    }
  },
  created () {
    this.is_personal_login = this.$store.state.LoginOrNot === true && this.$store.state.LoginType === 2
  },
  methods: {
    // 列表跳转
    handleJump (val, type) {
      this.JumpItem = val
      if (this.menu) {
        for (let index = 0; index < this.menu.length; index++) {
          for (let index2 = 0; index2 < this.menu[index].children.length; index2++) {
            if (parseInt(this.menu[index].children[index2].id) === parseInt(val.type_id)) {
              this.infoPid = this.menu[index].id
            }
          }
        }
      }
      this.infoPid = val.pid ? val.pid : this.infoPid
      if (type == 'item') {
        this.$router.push({
          path: '/cityinfo/info/' + val.id,
          query: {
            pid: val.pid,
            telState: type
          }
        })
      } else {
        if (this.is_personal_login === false) {
          this.$dialog
            .confirm({
              title: '提示',
              message: '当前操作需要登录账号',
              confirmButtonText: '去登录'
            })
            .then(() => {
              this.showLogin = true
              this.after_login_data = {
                method: 'contactHim'
              }
            })
            .catch(() => {})
        } else {
          http.get(api.article_info, {id: val.id}).then(res => {
            if (!res.data.need_pay_for_mobile || (res.data.need_pay_for_mobile && res.data.paid)) {
              window.location.href = 'tel:' + res.data.mobile
            } else {
              this.$router.push({
                path: '/cityinfo/info/' + val.id,
                query: {
                  pid: this.infoPid,
                  telState: type
                }
              })
            }
          })
        }
      }
    },
    // 查看全文
    lookall (index) {
      this.d_listData[index].is_all = 1
      this.d_listData = this.d_listData.map(function (item) {
        return item
      })
    },
    afterLogin () {
      this.showLogin = false
      http.get(api.article_info, {id: this.JumpItem.id}).then(res => {
        if (!res.data.need_pay_for_mobile || (res.data.need_pay_for_mobile && res.data.paid)) {
          window.location.href = 'tel:' + res.data.mobile
        } else {
          this.$router.push({
            path: '/cityinfo/info/' + this.JumpItem.id,
            query: {
              pid: this.infoPid,
              telState: 'tel'
            }
          })
          // window.location.reload()
        }
      })
    },
    closeLogin () {
      this.showLogin = false
    }
  }
}
</script>

<style lang="scss" scoped>
.list{
  .item{
      padding: 16px 19px 16px 17px;
      border-bottom: 5px solid #f8f8f8;
      .name{
          position: relative;
          color: #333333;
          font-size: 0;
          .top{
            position: absolute;
            left: 0;
            top: 0;
            background-color: #ff4949;
            color: #FFFFFF;
            font-size: 10px;
            padding: 2px 5px;
            margin-right: 5px;
            display: inline-block;
            border-radius: 3px;
          }
          .all{
            position: absolute;
            bottom: 0;
            right: 80px;
            z-index: 1;
            cursor: pointer;
            color: #ff4949;
            display: inline-block;
            font-size: 14px;
          }
          .text{
            display: inline-block;
            font-size: 14px;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            word-wrap:break-word;
          }
          .text_indent{
            text-indent: 2.5em;
          }
      }
      .more::after{
          content: "....";
          font-size: 14px;
          position: absolute;
          bottom: 0;
          right: 0;
          padding-right: 120px;
          padding-left: 4px;
          background: linear-gradient(to right, rgba(255,255,255,0),rgba(255,255,255,1) 0%);
      }
      .imgs{
        margin-top: 12px;
        position: relative;
        display: flex;
        .img,img{
          width: 77px;
          height: 55px;
          margin-right: 11px;
        }
        .imgnum{
          width: 77px;
          height: 55px;
          position: absolute;
          font-size: 11px;
          color: #ffffff;
          right: -2px;
          display: flex;
          justify-content: center;
          align-items: center;
          background: rgba(0,0,0,0.6);
        }
      }
      .bottom{
        margin-top: 17px;
        position: relative;
        display: flex;
        align-items: center;
        font-size: 12px;
        color: #999999;
        .info{
          display: flex;
          align-items: center;
          .label{
            border: 1px solid #1787fb;
            color: #1787fb;
            padding:2px;
            border-radius: 3px;
          }
          span{
            margin-left: 12px;
          }
        }
        .call{
          width: 81px;
          height: 34px;
          position: absolute;
          right: 0;
          background: url("../../../assets/images/cityinfo/index/index_58.png") 0 center no-repeat;
          background-size: 81px 34px;
          display: flex;
          justify-content: center;
          align-items: center;
          padding-bottom: 3px;
          .img{
            height: 15px;
            background: url("../../../assets/images/cityinfo/index/index_57.png") 0px center no-repeat;
            background-size: 12px 15px;
            color: #ffffff;
            padding-left: 18px;
            font-size: 13px;
            font-weight: bold;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
  }
}
</style>
